<template>
  <div class="flex flex-column">
    <div class="number-wrap">
      <div class="number-item"  style="background-color:#66CD00;">
        <div class="item-left">
          <p class="itemP itemfontone">总</p>
          <span class="number-txt">¥{{!!money.totalBonus.toString()?money.totalBonus.toString():''}}</span>
          <el-button class="mini" size="mini" @click="Withdrawal">提现</el-button>
        </div>
      </div>
     <div class="number-item numtwo"  style="background-color:#1E90FF;">
        <div class="item-left">
          <p class="itemP itemfonttwo">今日</p>
          <span class="number-txt"><span style="margin-right:18px;">+</span>¥{{!!money.todayBonus.toString()?money.todayBonus.toString():''}}</span>
        </div>
      </div>
      <div class="number-item numthree"  style="background-color:#7B68EE;">
        <div class="item-left">
          <p class="itemP itemfontthree">本月</p>
          <span class="number-txt"><span style="margin-right:18px;">+</span>¥{{!!money.monthBonus.toString()?money.monthBonus.toString():''}}</span>
        </div>
      </div>
    </div>
    <div class="home-table-area bg-white">
      <el-row class="float-right" style="z-index:999">
          <el-button  type="primary" plain @click="noticeOut"><span style="margin:0 30px">账单导出</span></el-button>
      </el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="日汇总" name="first">
          <el-date-picker class="hta-input" v-model="firsttime" type="date" placeholder="选择日期" @change="getDate"></el-date-picker>
          <el-table class="home-table" :data="tableData" :header-cell-style="{background:'#F7F7F7',color:'#101010', fontWeight: 'normal'}">
            <el-table-column label="日期" header-align="center" align="center">
              <template slot-scope="scope">
                  {{dateFormat(scope.row.updated_at)}}
              </template>
            </el-table-column>
            <el-table-column prop="bonus" label="收入(元)" header-align="center" align="center">
            </el-table-column>
            <el-table-column label="时间" header-align="center" align="center">
              <template slot-scope="scope">
                  {{dateFormat(scope.row.complete_time)}}
              </template>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button type='text' @click="detailInfo(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="hm-page"
            background
            layout="prev, pager, next"
            :page-size="searchObj.page_num"
            :total="total" @current-change="sizeChange">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="月汇总" name="second">
          <el-date-picker class="hta-input" v-model="secondtime" type="month" placeholder="选择日期"  @change="getDates"></el-date-picker>
          <el-table class="home-table" :data="tableDatas" :header-cell-style="{background:'#F7F7F7',color:'#101010', fontWeight: 'normal'}" >
            <el-table-column label="日期" header-align="center" align="center">
              <template slot-scope="scope">
                  {{dateFormat(scope.row.updated_at)}}
              </template>
            </el-table-column>
            <el-table-column prop="bonus" label="收入(元)" header-align="center" align="center">
            </el-table-column>
            <el-table-column label="时间" header-align="center" align="center">
              <template slot-scope="scope">
                  {{dateFormat(scope.row.complete_time)}}
              </template>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button type='text' @click="detailInfo(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="hm-page"
            background
            layout="prev, pager, next"
            :page-size="searchObj.page_num"
            :total="totals" @current-change="sizeChanges">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 提现弹框 -->
    <el-dialog
      title="提现"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
      <el-form :model="addForm" ref="addForm" label-width="120px" >
        <el-row>
          <el-col :span="4" class="icons">
            <div class="float-right"> ¥ </div>
          </el-col>
          <el-col :span="12">
            <el-input v-model="addForm.money" placeholder="请输入提现金额"></el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px">
          <el-col :span="14">
            <div class="float-right tx">最高可提现¥{{!!withdrawable_amount?withdrawable_amount:'0.00'}}</div>
          </el-col>
          <el-col :span="4">
            <span class="allwithdraw" @click="allwithdraw">全部提现</span>
          </el-col>
        </el-row>
        <el-row style="margin-top:80px">
          <el-col :span="4">
            <div class="float-right letter">提现至</div>
          </el-col>
          <el-col :span="14">
            <div class="yhk">
              <el-popover placement="top" v-for="item in bankCard" :key="item.id"  :title="item.name" width="200" trigger="hover"  :content='"卡号:"+item.card' class="bankcard">
                <i slot="reference" class="el-icon-bank-card" >
                  <el-radio v-model="addForm.card" :label="item.card"><span style="display:none;">银行卡</span></el-radio>
                </i>
              </el-popover>
            </div>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" @click="Withdrawal">添加银行卡</el-button>
          </el-col>
        </el-row>  
        <div style="text-align:center;margin-top:50px;">
          <el-button type="primary" @click="readyress"><span style="margin:0 20px">确定</span></el-button>
        </div>
      </el-form>  
    </el-dialog>
  </div>
</template>

<script>
import { exportday,exportmonth } from '@/api/request'
export default {
  name: 'index',
  data () {
    return {
      dialogVisible:false,
      addForm:{
        money:'',
        card:'',
      },
      cardList:[],
      withdrawable_amount:'1364.2',
      bankCard:[{
        name:'中国工商银行',
        card:'615135131313535151',
        id:'1'
      },{
        name:'中国邮政储蓄银行',
        card:'615134532375557151',
        id:'2'
      },{
        name:'中国农业银行',
        card:'672753535427313771',
        id:'3'
      },{
        name:'中国人民银行',
       card:'6273532435788545425',
        id:'4'
      },],
      tableData: [],
      tableDatas: [],
      firsttime:'',
      secondtime:'',
      searchObj:{
        type:'day',
        time:'',
        page: 1,
        page_num: 10,
      },
      searchObjs:{
        type:'month',
        time:'',
        page: 1,
        page_num: 10,
      },
      total:3,
      totals:3,
      activeName:'first',
      money:{
        totalBonus:'',
        todayBonus:'',
        monthBonus:'',
      },
      total:3,
      admin_id:'',
    }
  },
  mounted () {
    this.admin_id = this.$store.state.adminId
    this.getbillListDay()
    this.getbillListMonth()
    this.getbill()   

  },
  methods: {
    // 账单列表
    getbillListDay(){
      this.searchObj.admin_id=this.admin_id
      this.searchObj.time = new Date(new Date().toLocaleDateString()).getTime() / 1000 || ''
      this.$api.billList(this.searchObj).then(res => {
        this.tableData = res.data
        this.total = res.page_info.total
      })
    },
    getbillListMonth(){
      this.searchObjs.admin_id=this.admin_id
      this.searchObjs.time = new Date(new Date().getFullYear(),new Date().getMonth(),1).getTime() / 1000 || ''
      this.$api.billList(this.searchObjs).then(res => {
        this.tableDatas = res.data
        this.totals = res.page_info.total
      })
    },

    // 账单导出
    noticeOut(){
      if(this.activeName === 'first'){
        if(this.firsttime===''){
          window.open(exportday)
        }else{
          let timeday = process.env.NODE_ENV === 'production' ? "http://192.168.3.37:8200/admin/bill/export?admin_id="+ this.admin_id+ "&type=day&time=" + this.firsttime.getTime() / 1000 : '/admin/bill/export?admin_id=' + this.admin_id+ '&type=' + 'day' + '&time=' + this.firsttime.getTime() / 1000
          // let timeday = "http://192.168.3.37:8200/admin/bill/export?admin_id="+ this.admin_id+ "&type=day&time="+ new Date(new Date().toLocaleDateString()).getTime() / 1000
          window.open(timeday)
        }
      }else if(this.activeName === 'second'){
        if(this.secondtime===''){
           window.open(exportmonth)
        }else{
          let timemonth = process.env.NODE_ENV === 'production' ? "http://192.168.3.37:8200/admin/bill/export?admin_id="+ this.admin_id+ "&type=month&time=" + this.secondtime.getTime() / 1000 : '/admin/bill/export?admin_id=' + this.admin_id+ '&type=' + 'month' + '&time=' + this.secondtime.getTime() / 1000
          console.log(timemonth)
          // let timemonth = "http://192.168.3.37:8200/admin/bill/export?admin_id="+ this.admin_id+ "&type=month&time=" + this.secondtime.getTime() / 1000 
          window.open(timemonth)
        }
      }
    },
    // 账单汇总
    getbill(){
      this.$api.bill({admin_id:this.admin_id}).then(res => {
        this.money = res
      })
    },    
    // 提现
    Withdrawal(){
      this.dialogVisible = true
    },
    allwithdraw(){
       this.addForm.money = this.withdrawable_amount 
    },
    // 详情
    detailInfo(){

    },
    // 第一个页面分页
    sizeChange(val){
      this.searchObj.page_num = val
    },
    // 第二个页面分页
    sizeChanges(val){
      this.searchObj.page_num = val
    },
    readyress(){

    },
    getDate(){
      this.searchObj.admin_id=this.admin_id
      this.searchObj.time = this.firsttime.getTime() / 1000|| ''
      this.$api.billList(this.searchObj).then(res => {
        this.tableData = res.data
        this.total = res.page_info.total
      })
    },
    getDates(){
      this.searchObjs.admin_id=this.admin_id
      this.searchObjs.time = this.secondtime.getTime() / 1000|| ''
      this.$api.billList(this.searchObjs).then(res => {
        this.tableDatas = res.data
        this.totals = res.page_info.total
      })
    },
    handleClose(){
      this.dialogVisible = false
    },
    dateFormat (date, fmt = 'yyyy-MM-dd hh:mm:ss') {
      date = new Date(date * 1000)
      const o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    }
  }
}
</script>

<style scoped>
  .flex >>>.el-tabs__nav-wrap::after,.flex >>>.el-tabs__active-bar.is-top{
    width: 0%!important;
  }
  .flex >>>.el-tabs__item.is-top.is-active{
      font-size:18px;
  }
  .yhk >>>.el-radio__inner{
   
  }
  .yhk >>>.el-radio__inner::after{
  }
  .bankcard{
    float:left;
    margin-left:30px;
    font-size:20px;
  }
  .tx{
    color:#828282;
    margin-right:70px;
    letter-spacing:1px;
  }
  .allwithdraw{
    color:#00BFFF;
    border-bottom:1px solid #00BFFF;
    cursor:pointer;
  }
  .icons{
    margin:5px 20px 0 0;
    font-size:25px;
    font-weight: 500;
    color:black;
  }
  .number-wrap{
    display: flex;
  }
  .number-item{
    flex: 1;
    margin-right: 60px;
    position: relative;
    display: flex;
    cursor: pointer;
  }
  .number-item:last-of-type{
    margin-right: 0!important;
  }
  .item-left{
    flex: 1;
    text-align: center;
    vertical-align: middle;
  }
  .item-left>p{
    width: 50px;
    height: 40px;
    margin-left: 30px;
    border-radius: 50%;
    color:#ffff;
  }
  .itemP{
    background-color: rgba(20, 39, 1, 0.13);
    align-items: center;
    padding-top:12px;
    float: left;
  }
  .itemfontone{
    font-size:22px;
  }
  .itemfonttwo,.itemfontthree{
    font-size:18px;
  }
  .mini{
    margin:30px 0
  }
  .number-txt{
    font-size: 24px;
    color: #ffff;
    float:left;
    margin: 30px 0 0 35px ;
  }
</style>
